import React, {Component} from 'react'

import {
    View,
    Image,
    Dimensions,
    Text,
    StyleSheet,
    TouchableOpacity,
    Linking,
    Clipboard
} from "react-native";

export default class Item extends Component {


    createTpwdAndToTaobao = (item) => {
        fetch(this.tpwdUrl + "?url=" + item.couponClickUrl + "&logo=" + item.pictUrl + "&text=" + item.title, {
            method: "GET"
        }).then((response) => response.json()).then((response) => {
            console.log(response);
            Clipboard.setString(response.data.model);
            this.openTaoBao()
        }).catch((err) => {
            console.log("网络异常" + JSON.stringify(err));
        });
    };

    openTaoBao = (url) => {
        Linking.canOpenURL('taobao://').then((supported) => {
            if (!supported) {
                alert("您的手机没有安装淘宝，请先安装淘宝")
            } else {

                return Linking.openURL('taobao://' + (url === null ? "" : url));
            }
        })
    };

    toTaobao = (item) => {
        return this.openTaoBao(item.couponClickUrl.substr(8));
    };


    render() {
        let item = this.props.itemData;
        return (
            <TouchableOpacity onPress={() => this.toTaobao(item)}>

                <View style={{
                    flex: 1,
                    minHeight: 200,
                    maxHeight: 400,
                    margin: 10,
                    // flexDirection: 'row',
                    backgroundColor: "#fff",
                    borderBottomColor: "#eee",
                    borderBottomWidth: 1,
                    borderRadius: 2,
                }}

                >
                    <Image source={{uri: item.pictUrl}}
                           style={{
                               width: Dimensions.get("window").width / 2 - 20,
                               height: Dimensions.get("window").width / 2 - 20,
                               borderRadius: 2,
                               backgroundColor: "#fa0"
                           }}/>
                    <View style={{minHeight: 60, paddingTop: 10}}>
                        <View style={{
                            height: 25,
                            marginLeft: 10,
                            marginRight: 10,
                            paddingBottom: 5,
                            justifyContent: "flex-end"
                        }}>
                            <Text style={{
                                fontSize: 13,
                                overflow: "hidden",
                                width: Dimensions.get("window").width / 2 - 40
                            }}>{item.title}</Text>
                        </View>
                        <View style={{
                            height: 25,
                            marginLeft: 10,
                            marginRight: 10,
                            paddingBottom: 5,
                            justifyContent: "flex-end"
                        }}>
                            <Text style={[{fontSize: 13, color: "#777"}]}>
                                月销 {item.volume}
                            </Text>
                        </View>
                        <View style={{
                            height: 35,
                            marginLeft: 10,
                            marginRight: 10,
                            paddingBottom: 10,
                            justifyContent: "flex-end"
                        }}>
                            <View style={{flexDirection: 'row'}}>
                                <View style={{
                                    flex: 1,
                                    height: 25,
                                    flexDirection: 'row',
                                    alignItems: 'center',
                                    justifyContent: 'flex-start',
                                    textAlign: 'center'
                                }}>

                                    <Text style={[{fontSize: 12, color: "#f43"}]}>
                                        券后
                                    </Text>
                                    <Text style={[{fontSize: 10, color: "#f43", margin: 2}]}>
                                        ¥
                                    </Text>

                                    <Text style={[{fontSize: 15, fontWeight: "bold", color: "#f43"}]}>
                                        {item.zkFinalPrice}
                                    </Text>
                                </View>
                                <View style={{
                                    flex: 1,
                                    flexDirection: 'row',
                                    alignItems: 'center',
                                    justifyContent: 'flex-end',
                                }}>
                                    <View style={{
                                        height: 25,
                                        borderWidth: 1,
                                        borderColor: "#f43",
                                        borderStyle: 'dotted',
                                        borderRadius: 2,
                                        justifyContent: 'center',
                                        alignItems: 'center',
                                        flexDirection: 'row',
                                        paddingLeft: 10,
                                        paddingRight: 10
                                    }}>
                                        <Text style={{fontSize: 10, color: "#f43"}}>¥</Text>
                                        <Text
                                            style={{
                                                fontSize: 13,
                                                fontWeight: "bold",
                                                color: "#f43"
                                            }}>{item.couponInfo.substr(item.couponInfo.length - 2, 2)}</Text>

                                    </View>
                                </View>
                            </View>
                        </View>
                        <View style={{
                            height: 35,
                            flexDirection: 'row',
                            justifyContent: "flex-start",
                            alignItems: 'center',
                            backgroundColor: '#fffafa'
                        }}>

                            <View style={{minHeight: 35, justifyContent: 'center'}}>
                                <Image
                                    source={{uri: item.avatar}}
                                    style={{
                                        width: 14,
                                        height: 14,
                                        margin: 5,
                                        borderRadius: 7,
                                        backgroundColor: "#fa0"
                                    }}/>
                            </View>
                            <Text style={[{
                                height: 14,
                                width: Dimensions.get("window").width / 2 - 60,
                                paddingLeft: 10,
                                paddingRight: 10,
                                overflow: "hidden",
                                maxWidth: Dimensions.get("window").width - 100,
                                fontSize: 13,
                                color: "#444",
                            }]}
                                  onPress={() => alert("旗舰店")}
                            >{item.shopTitle}</Text>
                        </View>
                    </View>
                </View>
            </TouchableOpacity>
        )
    }
}